<template>
	<!-- 修改地址 -->
	<view class="address">
		<image src="../../static/images/Order/icon-adress.png" mode="widthFix"></image>
		<view class="content">
			<view class="phoneName">{{phoneName}} {{filterTelephone(Telephone)}}</view>
			<view class="proAddress">{{Address}}</view>
		</view>
		<view class="edit">修改</view>
	</view>
</template>

<script setup lang="ts">
	import { toRefs, defineProps } from 'vue'
	const props = defineProps({
		//子组件接收父组件传递过来的值
		phoneName: String,
		Address: String,
		Telephone: String
	})
	//使用父组件传递过来的值
	const { phoneName, Address } = toRefs(props)
	// 过滤手机号码
	const filterTelephone = (value : string) => {
		const start = value.slice(0, 3)
		const end = value.slice(7, 11)
		return `${start}****${end}`
	}
</script>

<style scoped lang='scss'>
	@import '@/common.scss';

	/* 修改地址 */
	.address {
		width: 91%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: $contentPadding;
		background: #2A2B2D;
		border-radius: 16px;
		box-sizing: border-box;
		margin: 40px auto 0 auto;

		image {
			width: 40px;
			/* height: 40px; */
		}

		.content {
			flex: 1;
			margin-left: 35px;

			.phoneName {
				font-size: 32px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 45px;
				letter-spacing: 1px;
			}

			.proAddress {
				max-width: 440px;
				height: auto;
				font-size: 24px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #7F7F81;
				line-height: 33px;
			}
		}

		.edit {
			width: 60px;
			margin-left: 56px;
			padding-left: 24px;
			border-left: 1px #ffffff solid;
			color: white;
			font-size: 24px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 33px;
		}
	}
</style>